<!--
 * @Author: your name
 * @Date: 2021-04-30 09:14:45
 * @LastEditTime: 2021-05-06 09:51:59
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bairui after\bairuimcr\src\views\daimazs\index.vue
 代码知识
-->

<template>
  <div>
    <!-- 添加按钮 -->
    <div class="btn-group">
      <el-button
        icon="el-icon-finished"
        plain
        size="mini"
        style="margin: 20px"
        type="primary"
        @click="add()"
        >添加</el-button
      >
    </div>
    <!--  表格信息  -->
    <el-table
      v-loading="loading"
      :data="list"
      border
      style="width: 98%;margin: 0 auto"
    >
      <el-table-column align="center" label="Id" width="60">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="member_id" width="100">
        <template slot-scope="scope">
          {{ scope.row.member_id }}
        </template>
      </el-table-column> -->
      <el-table-column align="center" label="分类Id" width="80">
        <template slot-scope="scope">
          {{ scope.row.cate_id }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="标题" width="155">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="排序" width="60">
        <template slot-scope="scope">
          {{ scope.row.sort }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="created_at" width="100">
        <template slot-scope="scope">
          {{ scope.row.created_at }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="updated_at" width="100">
        <template slot-scope="scope">
          {{ scope.row.updated_at }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="getmember" width="100">
        <template slot-scope="scope">
          {{ scope.row.getmember }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="cate" width="60">
        <template slot-scope="scope">
          {{ scope.row.cate }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="图片" width="120">
        <template slot-scope="scope">
          {{ scope.row.image }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="内容" width="540px">
        <template slot-scope="scope">
          {{ scope.row.content }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="300px">
        <template slot-scope="scope" style="border:1px solid #f00">
          <el-button
            icon="el-icon-edit"
            plain
            size="mini"
            type="primary"
            @click="(dialogFormVisibleChange = true), change(scope.row)"
            >修改</el-button
          >
          <el-popconfirm
            cancel-button-text="取消"
            confirm-button-text="确定"
            icon="el-icon-info"
            icon-color="red"
            title="这是一段内容确定删除吗？"
            @confirm="confirmDelete(scope.row.id)"
          >
            <el-button
              slot="reference"
              icon="el-icon-delete"
              size="mini"
              style="margin-left: 20px"
              type="danger"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--    添加数据-->
    <el-dialog :visible.sync="dialogFormVisible" title="添加数据">
      <el-form :model="form">
        <el-form-item :label-width="formLabelWidth" label="Id">
          <el-input v-model="form.id" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item :label-width="formLabelWidth" label="member_id">
          <el-input v-model="form.member_id" autocomplete="off"></el-input>
        </el-form-item> -->
        <el-form-item :label-width="formLabelWidth" label="分类Id">
          <el-input v-model="form.cate_id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="标题">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="排序">
          <el-input v-model="form.sort" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="图片">
          <el-input v-model="form.image" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="内容">
          <el-input v-model="form.content" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmAadd(form)">确 定</el-button>
      </div>
    </el-dialog>
    <!--  修改  -->
    <el-dialog :visible.sync="dialogFormVisibleChange" title="修改数据">
      <el-form :model="changeForm">
        <el-form-item :label-width="formLabelWidth" label="Id">
          <el-input v-model="changeForm.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="分类Id">
          <el-input v-model="changeForm.cate_id" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item :label-width="formLabelWidth" label="member_id">
          <el-input
            v-model="changeForm.member_id"
            autocomplete="off"
          ></el-input>
        </el-form-item> -->
        <el-form-item :label-width="formLabelWidth" label="created_at">
          <el-input
            v-model="changeForm.created_at"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="分类Id">
          <el-input v-model="changeForm.cate_id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="updated_at">
          <el-input
            v-model="changeForm.updated_at"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="getmember">
          <el-input
            v-model="changeForm.getmember"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="cate">
          <el-input v-model="changeForm.cate" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="标题">
          <el-input v-model="changeForm.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="排序">
          <el-input v-model="changeForm.sort" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="图片">
          <el-input v-model="changeForm.image" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="内容">
          <el-input v-model="changeForm.content" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="created_at">
          <el-input
            v-model="changeForm.created_at"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="updated_at">
          <el-input
            v-model="changeForm.updated_at"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="getmember">
          <el-input
            v-model="changeForm.getmember"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="cate">
          <el-input v-model="changeForm.cate" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleChange = false">取 消</el-button>
        <el-button type="primary" @click="confirmChange">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { c, g, s, z } from "@/api/fenlei";
import { Message } from "element-ui";

export default {
  name: "Index",
  filters: {
    filterType(e) {
      switch (e) {
        case 1:
          return "success";
        default:
          return "danger";
      }
    },
    filterTxt(e) {
      switch (e) {
        case 1:
          return "显示";
        default:
          return "隐藏";
      }
    },
  },
  data() {
    return {
      list: null,
      form: {
        id: null,
        cate_id: null,
        // member_id: null,
        sort: null,
        title: null,
        content: null,
        image: null,
        created_at: null,
        updated_at: null,
        getmember: null,
        cate: null,
      },
      changeForm: [],

      dialogFormVisible: false,
      dialogFormVisibleChange: false,
      formLabelWidth: "120px",
      loading: true,
    };
  },
  methods: {
    // 获取页面
    async fetchDate() {
      await c().then((response) => {
        if (response.code == 200) {
          this.loading = false;
          const { data } = response;
          this.list = data;
          Message.success({
            message: "获取成功",
          });
        }
      });
    },
    // 删除
    async deleteThis(id) {
      await s(id).then((response) => {
        this.loading = true;
        if (response.code == 200) {
          setTimeout(() => {
            this.loading = false;
            Message.info({
              message: "删除成功",
            });
          }, 1300);
          this.fetchDate();
        }
      });
    },
    // 添加框显示
    add() {
      this.dialogFormVisible = true;
    },
    // 确认添加数据
    async confirmAadd(getform) {
      await z(getform).then((response) => {
        if (response.code == 200) {
          this.fetchDate();
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            this.dialogFormVisible = false;
            Message.success({
              message: "添加成功",
            });
          }, 300);
        }
      });
    },
    //  修改
    change(form) {
      this.changeForm = form;
    },
    //  确认修改
    async confirmChange() {
      await g(this.changeForm).then((response) => {
        if (response.code == 200) {
          this.dialogFormVisibleChange = false;
          this.loading = true;
          this.fetchDate();
          setTimeout(() => {
            this.loading = false;
            Message.success({
              message: "修改成功",
            });
          }, 300);
        }
      });
    },
    confirmDelete(e) {
      this.deleteThis(e);
    },
  },
  created() {
    this.fetchDate();
  },
};
</script>

<style scoped></style>
